<template>
  <div class="main">
    <basic-layout title="上传体检报告" :showAddBtn="false" backBtnType="arrow" class="wrapBox">
      <van-form ref="formData" class="vanForm">

        <van-field clickable
                   required
                   name="picker"
                   :value="formData.organizationsName"
                   label="体检机构"
                   placeholder="请选择体检机构"
                   @click="showOrganizations = true"/>


        <div class="imgBox">
          <div style="margin-left: 5px">
            <van-uploader
              :before-read="beforeUpload"
              :max-count="1"
              accept="application/pdf"
              style="width: 100%; display: block; margin: 0 auto 20px;">

              <van-button  type="default" >选择体检报告</van-button>
            </van-uploader>
          </div>
        </div>

        <div style="height: 100px;width: 100%">
          <van-checkbox-group  v-if="getFile">
            <van-cell   clickable >
              <template #icon>
                <img src="./pdf.png" width="50px" height="50px" alt="avatar" class="avatar" style="margin-right: 10px;">
              </template>
              <template #title>
                <span class="title">{{ getFile.name }}</span>
              </template>
              <template #label>
                <div class="flex-container">
                  <span class="label">{{ fileDate(getFile.lastModified) }}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="label">{{ fileSize(getFile.size) }}MB</span>
                </div>
              </template>
            </van-cell>
          </van-checkbox-group>
        </div>


      </van-form>

      <van-button class="defaultBtn" size="large" color="#4eb3e9" @click="onSubmit">提交</van-button>

    </basic-layout>

    <!--      体检机构-->
    <van-popup v-model="showOrganizations" position="bottom">
      <van-picker title="请选择体检机构"
                  show-toolbar
                  :columns="organizationsList"
                  @confirm="selectOrganizations"
                  @cancel="showOrganizations = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.name }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <full-loading v-if="loading"></full-loading>

  </div>
</template>
<script>
import { addInform } from "@/api/realAssets/rvhealth/inform";
import { olistOrganizations } from "@/api/realAssets/rvhealth/organizations";
import { signUpload} from "@/api/realAssets/rvhealth/common";

export default {
  name: 'applyInformAdd',
  props: {},
  components: {
  },
  data() {
    return {
      //加载
      loading: false,

      // 体检机构表格数据
      organizationsList: [],
      showOrganizations: false,

      //文件
      getFile: null,

      //表单
      formData: {
        userId: JSON.parse(sessionStorage.getItem("userInfo")).userId, //申请人标识
        organizationsId: null,
        organizationsName: "",
        type: "手机",
        fileArr: "", //体检报告
      },

    }
  },
  created() {
    //查询体检机构
    this.getOrganizations();
  },
  computed: {},
  mounted() {
  },
  methods: {
    //查询体检机构
    getOrganizations(){
      olistOrganizations().then(response => {
        this.organizationsList = response.data.data;
      });
    },

    //选择体检机构
    selectOrganizations(option){
      this.formData.organizationsId = option.id;
      this.formData.organizationsName = option.name;

      this.showOrganizations = false;
    },

    //选择文件
    beforeUpload (file) {

      //最大文件大小
      const maxSize = 10 * 1024 * 1024 // 10MB
      if (file.size > maxSize) {
        this.$toast('文件大小不能超过10MB!')
        return false // 阻止文件读取
      }
      if (file.type !== 'application/pdf') {
        this.$toast('请上传PDF格式的文件！')
        return false // 阻止上传
      }

      this.getFile = file;

      const formData = new FormData();
      formData.append('file', file);

      //加载
      this.loading = true;
      //请求接口 -- 签名上传
      signUpload(formData).then(result=>{
        //这里进行获取到result之后的操作
        // console.log( result );

        this.formData.fileArr = result.data.fileCode;

        //加载
        this.loading = false;
      });
    },
    //文件日期
    fileDate (time) {
      // 创建Date对象
      var date = new Date(time)
      // 获取年、月、日、时、分、秒
      var year = date.getFullYear()
      var month = ('0' + (date.getMonth() + 1)).slice(-2) // getMonth()返回0-11，所以需要+1
      var day = ('0' + date.getDate()).slice(-2)
      // 组合成字符串
      var formattedTime = year + '年' + month + '月' + day + '日'
      return formattedTime
    },
    //文件大小
    fileSize (size) {
      return (size / 1024 / 1024).toFixed(2)
    },

    // 提交
    onSubmit() {
      //请选择体检机构
      if (this.formData.organizationsId === null) {
        this.$Notify({type: 'warning', message: "请选择体检机构！"});
        return;
      }

      //请上传体检报告
      if (this.formData.fileArr === "") {
        this.$Notify({type: 'warning', message: "请上传体检报告！"});
        return;
      }

      //加载
      this.loading = true;
      //新增体检报告
      addInform(this.formData).then(response => {
        this.$Notify({type: 'success', message: '新增成功！'});
        //返回上一页
        this.$router.go(-1);
        //加载
        this.loading = false;
      });

    },

  },
}
</script>
<style lang="less" scoped>
.vanForm {
  overflow-y: auto;
  margin-bottom: 15px;

  .imgBox {
    padding: 16px;
    position: relative;

    &:before {
      position: absolute;
      left: 0.21333rem;
      color: #ee0a24;
      font-size: 0.37333rem;
      content: '*';
    }

    &:after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0.42667rem;
      bottom: 0;
      left: 0.42667rem;
      border-bottom: 0.02667rem solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }

    .picStyle {
      padding: 16px 0px 16px 0px !important;
    }

  }
}

.foot {
  position: absolute;
  width: 100%;
  background: #ffffff;
  padding: 10px 0;
  right: 0px;
  bottom: 0px;
  height: 45px;
  z-index: 1;

  .button {
    color: #ffffff;
    border-radius: 20px;
    height: 45px;
    line-height: 45px;
    width: 120px;
    font-size: 17px;
    width: 80%;
    margin-left: 10%;
  }
}

.scan {
  background-image: url('../../../../assets/images/nx/saoyisao.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 26px;
  height: 26px;
  margin-top: 10px;
  margin-left: 88%;
  position: absolute;
  z-index: 9999;
  color: rgb(51, 51, 51);
}
</style>
